<template>
  <div class="pull-refresh">
    <van-pull-refresh v-model="state.refreshing" @refresh="onRefresh">
      <van-list
        offset="5"
        error-text="请求失败，点击重新加载"
        v-model:error="state.error"
        v-model:loading="state.loading"
        :finished="state.finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-swipe-cell v-for="item in list" :key="item.id">
          <slot name="userInfo" :item="item"></slot>
          <template #right>
            <van-button @click="turn(item)" square type="danger" text="驳回注册" />
            <van-button @click="confirm(item)" square type="primary" text="同意注册" />
          </template>
        </van-swipe-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { lists } from "../../data/userInfo";
export default {
  name: "Pull-Refresh",
  props: {
    list: {
      type: Array,
      default: [],
    },
    count: {},
    error: {
      default: false,
    },
  },
  setup(props, { emit }) {
    const academyList = lists;
    const { list, count, error } = toRefs(props);
    const state = reactive({
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      error: false,
    });
    const turn = (item) => {
      emit("turn", item);
    };
    const confirm = (item) => {
      emit("confirm", item);
    };

    const onLoad = () => {
      state.loading = true;
      emit("onLoad", () => {
        state.loading = false;
        console.log(list.value.length, count.value, "组件里面");
        if (list.value.length === count.value) {
          return (state.finished = true);
        }
      });
      // state.loading = true;
      // setTimeout(() => {
      //   if (state.refreshing) {
      //     state.list = [];
      //   }
      //   for (let i = 0; i < 10; i++) {
      //     state.list.push(state.list.length + 1);
      //   }
      //   state.loading = false;
      //   if (state.list.length >= 40) {
      // state.finished = true;
      //   }
      // }, 1000);
    };

    const onRefresh = () => {
      console.log(list.value.length, count.value, "onRefresh组件里面");

      emit("onRefresh", () => {
        state.refreshing = false;
        state.finished = false;
      });
      // 清空列表数据
      // state.refreshing = true;
      // state.refreshing = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      // state.loading = true;
      // onLoad();
    };

    return {
      state,
      onLoad,
      onRefresh,
      academyList,
      turn,
      confirm,
    };
  },
};
</script>
<style lang="scss" scoped>
.pull-refresh {
  height: 100%;
}
</style>
